<template>
  <div>
    <div class="footer-view">
      <div class="footer-vav first foot1">
        <icons class="icon" name="logo1" />
      </div>
      <div class="footer-vav foot2">
        <div class="title">责任</div>
        <div
          v-for="item in silibInfo"
          :key="item.Id"
          class="link"
          @click="gotoPage(item.Id)"
        >
          {{ item.TypeName }}
        </div>
        <!-- <div class="link">原材料</div>
        <div class="link">制造+工艺</div>
        <div class="link">创新</div>
        <div class="link">我们在行动</div> -->
      </div>
      <div class="footer-vav foot3">
        <div class="title">导航</div>
        <router-link class="link" to="/summer">夏季 2024</router-link>
        <router-link class="link" to="/bedding">寝具</router-link>
        <router-link class="link" to="/responsibility">责任</router-link>
        <router-link class="link" to="/business">商业客户</router-link>
        <router-link class="link" to="/ab">ab</router-link>
      </div>
      <div class="footer-vav foot4">
        <div class="title">联系我们</div>
        <div class="desc">订阅以获取有关产品发布、活动和新闻的通知</div>
        <input
          class="email"
          v-model="email"
          placeholder="输入您的电子邮箱"
          type="text"
        />
        <div class="d-btn" @click="subData">订阅</div>
      </div>
    </div>
    <div class="f-sign-view">
      <div class="hezuo-view">
        <div class="logo"><icons class="icon" name="logo" /></div>
        <div class="icon-view">
          <icons class="icon" name="bottom_01" />
          <icons class="icon" name="xiangjis" />
          <icons class="icon" name="douyin" />
          <icons class="icon" name="youtube" />
          <icons class="icon" name="in" />
        </div>
        <div class="logo-r">
          <icons class="icon" name="ab" />
        </div>
      </div>
      <div class="cover-link">
        <div class="desc">
          安奇班尼
          作为对可持续发展承诺的一部分，不断研究和实施新方法，以降低每个系列对环境的影响。
        </div>
        <div></div>
        <div class="copy">
          © ANGIEBENNY {{ currentYear
          }}<a class="ba" href="https://beian.miit.gov.cn/"
            >沪ICP备13002639号</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useAppStore } from "@/store/modules/user";
import { GetResponsibility } from "@/server";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useAppStore();
import { computed, ref } from "vue";

const email = ref("");
function isValidEmail(email: string) {
  // 定义邮箱的正则表达式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  // 使用正则表达式进行匹配
  return emailRegex.test(email);
}
const currentYear = computed(() => new Date().getFullYear());
const silibInfo = ref([]) as any;
const GetResponsibilityFun = async () => {
  const res: any = await GetResponsibility({});
  if (res.Tag === 1) {
    silibInfo.value = res.Data.SleepType.splice(0, 4);
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetResponsibilityFun();
const gotoPage = (id: string) => {
  sessionStorage.setItem("typeId", id);
  router.push("responsibility?t" + new Date().getTime());
};
const subData = () => {
  if (isValidEmail(email.value)) {
    email.value = "";
    store.success("订阅成功");
  } else {
    store.warning("邮箱格式不正确");
  }
};
</script>

<style scoped lang="less">
.footer-view {
  height: 390px;
  padding: 97px 30px 53px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-bottom: 1px solid #d8d8d8;
  .footer-vav {
    &.first {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        width: 164px;
        height: 164px;
      }
    }
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    img {
      width: 174px;
      object-fit: contain;
      margin: auto;
    }
    .title {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 37px;
      margin-bottom: 16px;
    }
    .link {
      &:hover {
        color: #000;
      }
      cursor: pointer;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #696969;
      line-height: 37px;
    }
    .desc {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #696969;
      line-height: 37px;
    }
    .email {
      padding: 0 20px;
      width: 100%;
      max-width: 390px;
      height: 48px;
      border: 1px solid #979797;
    }
    .d-btn {
      cursor: pointer;
      &:hover {
        color: #000;
        background: #ffffff;
        border: 1px solid #979797;
      }
      transition: 0.3s all;
      margin-top: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 115px;
      height: 56px;
      border: 1px solid #000000;
      background: #000000;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 37px;
    }
  }
  .foot1 {
    width: 28%;
  }
  .foot2 {
    width: 20%;
    margin-left: 5%;
  }
  .foot3 {
    width: 22%;
  }
  .foot4 {
    width: 30%;
  }
}
.f-sign-view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 265px;
  padding: 40px 58px;
  .hezuo-view {
    display: flex;
    align-items: center;
    .logo {
      text-align: left;
      width: 18%;
      .icon {
        width: 180px;
        height: 17.5px;
      }
    }
    .icon-view {
      display: flex;
      flex: 1;
      .icon {
        margin-right: 30px;
        width: 1em;
        height: 1em;
      }
    }
    .logo-r {
      width: 20%;
      .icon {
        width: 76px;
        height: 43px;
      }
    }
  }
  .cover-link {
    display: flex;
    flex-direction: column;
    .desc {
      text-align: left;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-bottom: 10px;
    }
    .copy {
      text-align: left;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
    }
    .ba {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-left: 20px;
    }
  }
}
</style>
